<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../animate.css">
    <script src="../vue.js"></script>
    <style>
        .app {
            width: 200px;
            margin: auto;
        }
        
        img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
            margin-top: 10px;
            box-shadow: 0px 0px 10px #333;
        }
        
        .v-enter {
            opacity: 0;
        }
        
        .v-enter-to {
            opacity: 1;
        }
        
        .v-leave {
            opacity: 1;
        }
        
        .v-leave-to {
            opacity: 0;
        }
        
        .v-enter-active {
            transition: 2s;
        }
        
        .v-leave-active {
            transition: 2s;
        }
        
        .opacity-enter-active {
            animation: opacity 2s;
        }
        
        .opacity-leave-active {
            animation: opacity_1 2s;
        }
        
        @keyframes opacity {
            0% {
                opacity: 0;
                transform: scale(0);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes opacity_1 {
            0% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                opacity: 0;
                transform: scale(0);
            }
        }
        
        .zoom-enter-active {
            animation: zoomInDown 2s;
        }
        
        .zoom-leave-active {
            animation: zoomOutDown 2s;
        }
        
        .shake-enter-active {
            animation: shake 2s;
        }
        
        .shake-leave-active {
            animation: shake 2s;
        }
    </style>
</head>

<body>
    <div class="app">
        <button @click="show1=!show1">点击我切换效果</button>

        <transition>
            <img :src="imgsrc" alt="" v-if="show1">
        </transition>

        <button @click="show2=!show2">点击我切换效果</button>

        <transition name="opacity">
            <img :src="imgsrc" alt="" v-if="show2">
        </transition>
        <button @click="show3=!show3">点击我切换效果</button>

        <transition name="zoom">
            <img :src="imgsrc" alt="" v-if="show3">
        </transition>

        <button @click="show4=!show4">点击我切换效果</button>

        <transition name="shake">
            <img :src="imgsrc" alt="" v-if="show4">
        </transition>
    </div>
    <script>
        const vm = new Vue({
            data: {
                show1: true,
                show2: true,
                show3: true,
                show4: true,

                imgsrc: "../day01/images/1642131151272.jpg",
            },
        }).$mount(".app")
    </script>
</body>

</html>